<template>
    <div class="rightlistBox">
        <section>
           <el-card :body-style="{ padding: '8px 18px' }">
    <div slot="header" class="me-tag-header">
      <span>标签分类</span>
      <a @click="moreTags" class="me-pull-right me-tag-more">查看全部</a>
    </div>

    <ul class="me-tag-list">
      <li class="me-tag-item" v-for="t in tags" :key="t.id">
        <!--type="primary"-->
        <el-button @click="tag(t.tagName)" size="mini" type="primary" round plain>{{t.tagName}}</el-button>
      </li>
    </ul>
  </el-card>
        </section>

        <section>
            <div class="block">
            <span class="demonstration">用户评分</span>
            <el-rate
                v-model="value2"
                :colors="colors"
                :disabled="iscomment"
                @click="ratehandle">
            </el-rate>
            </div>
        </section>
    </div>
</template>

<script>
export default {
    name:'arccard',
    data(){
        return {
        value2: null,
        iscomment:false,
        colors: ['#99A9BF', '#F7BA2A', '#FF9900'],
        tags:[
            {id:1,tagName:'前端'},
            {id:2,tagName:'后端'},
            {id:3,tagName:'移动端'},
            {id:4,tagName:'生活感悟'},
            {id:5,tagName:'其他'}]
        }
       
    },
    methods:{
        ratehandle(){
            alert('谢谢您的评分');
            this.iscomment =!this.iscomment
        },
        tag(tagName){
            this.$emit('tagcard',tagName);
        },
        moreTags(){

        }
    }
}
</script>

<style lang="less" scoped>
.rightlistBox{
    position: relative;
}
.rightlistBox section {
    transition: all 0.2s linear;
    position: relative;
    background: #fff;
    padding:15px;
    margin-bottom: 20px;
    border-radius: 5px;
    width: 280px;
}
.rightlistBox section:hover{
    transform: translate(0,-2px);
    box-shadow:0 15px 30px rgba(0,0,0,.1);
}
@keyframes toflow {
    0%{
        /*top:400px;*/
        transform: scale(0.95) translate(0,10px);
    }
    50%{
        /*top:410px;*/
        transform:scale(1) translate(0,0px);
    }
    100%{
        /*top:400px;*/
        transform:scale(0.95) translate(0,10px);
    }
   
}
 .me-tag-list{
        list-style: none;
    }

</style>